<template>
  <a-modal
    :title='title'
    :width='1000'
    :visible='visible'
    :confirmLoading='confirmLoading'
    :maskClosable='false'
    @cancel='handleCancel'
  >
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-form-item
          :hidden='true'
          label='id'
          :labelCol='labelCol'
          :wrapperCol='wrapperCol'
        >
          <a-input
            v-decorator="['userId']"
          />
        </a-form-item>
        <a-row :getter='24'>
          <a-col :md='12' :sm='24'>
            <a-form-item
              label='用户名'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
            >
              <a-input
                placeholder='请输入用户名'
                :disabled='editable || showable'
                v-decorator="['username', {rules: [{required: true, message: '请输入用户名'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item
              label='手机号'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
            >
              <a-input
                :disabled='showable'
                placeholder='请输入手机号'
                v-decorator="['phone', {rules: [{required: true, message: '请输入手机号'}]}]" />
            </a-form-item>
          </a-col>

        </a-row>
        <a-row :getter='24'>
          <a-col :md='12' :sm='24'>
            <a-form-item
              label='真实姓名'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
            >
              <a-input
                :disabled='showable'
                placeholder='请输入手机号'
                v-decorator="['truename', {rules: [{required: true, message: '请输入手机号'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item
              label='状态'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
            >
              <a-select
                placeholder='请选择状态'
                :disabled='showable'
                v-decorator="['status', {rules: [{required: true, message: '请选择状态'}],initialValue: '1'}]"
                :options='statusTypeList'
              >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>


    <template slot='footer'>
      <div v-show='!showable'>
        <a-button key='cancel' @click='handleCancel'>取消</a-button>
        <a-button key='forward' :loading='confirmLoading' type='primary' @click='handleOk'>保存</a-button>
        <a-button type='primary' style='marginLeft: 8px' ghost @click='(e) => this.handleOk(true)'>
          保存并继续
        </a-button>
      </div>
    </template>
  </a-modal>

</template>

<script>
import pick from 'lodash.pick'
import { addObj, getObj, putObj } from '@api/sys/admin'
import { FormMixin } from '@/mixins/FormMixin'
import { statusTypeList } from '@/dict'

export default {
  name: 'UserAddOrUpdate',
  mixins: [FormMixin],
  data() {
    return {
      statusTypeList,
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    // 获取用户信息
    edit(id, type) {
      this.visible = true
      const { form: { setFieldsValue, resetFields } } = this
      resetFields()
      if (['edit', 'show'].includes(type)) {
        this.confirmLoading = true
        getObj(id).then(res => {
          const record = res.data
          this.$nextTick(() => {
            setFieldsValue(pick(record, ['userId', 'username', 'phone', 'status', 'truename']))
          })
        }).catch((err) => {
          this.$message.error(err.msg)
        }).finally(_ => {
          this.confirmLoading = false
        })
      }
    },
    // 结束保存用户信息
    handleOk(con = false) {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          this.confirmLoading = true
          try {
            if (this.type === 'add') {
              await addObj(values)
            } else if (this.type === 'edit') {
              await putObj(values)
            }
            if (con) {
              this.form.resetFields()
              this.confirmLoading = false
              this.$emit('ok')
            } else {
              this.handleCancel()
              this.$emit('ok')
            }
          } catch (e) {
            this.$message.error(e.msg)
            this.confirmLoading = false
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
